<template>
  <div>
    <h3>
      {{ obj.num }}
    </h3>
    <button @click="add">点我</button>
  </div>

  <div>
    <h3>
      {{ count }}
    </h3>
    <button @click="addCount">点我</button>
  </div>

  <div>
    <p>
      姓名: {{ name }}
    </p>
    <p>
      年龄: {{ age }}
    </p>
    <p>
      性别: {{ sex }}
    </p>
    <button @click="changeName">点我</button>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
export default {
  setup() {
    // reactive  引用类型响应式
    const obj = reactive({
      num: 666
    });
    const add = () => {
      obj.num += 1;
    };



    const count = ref(100)
    const addCount = () => {
        count.value += 1
    }



    const info = reactive({
      name: "张三",
      age: 20,
      sex: 1
    })

    const changeName = () => {
      info.name = "李四"
    }

    console.log(count)
    return {
      ...toRefs(info),
      obj,
      add,
      count,
      addCount,
      changeName
    }
  },
};
</script>

<style>
</style>